<template>
  <view class="container">
    <!-- 列表 -->
    <scroll-view
      scroll-y
      :scroll-top="scrollTop"
      :scroll-with-animation="true"
      refresher-enabled
      :refresher-triggered="refreshStatus"
      :enable-back-to-top="true"
      @refresherrefresh="resetRefresh"
      @scrolltolower="reachBottom"
    >
      <view class="record-list">
        <template v-for="record in dataSource" :key="record.id">
          <ve-card>
            <ve-cell-val label="操作人" :value="record.userName" />
            <ve-cell-val label="操作时间" :value="record.operateTime" />
            <ve-cell-val label="操作节点" :value="record.node" />
            <ve-cell label="变更内容" layout="vertical">
              <view class="up-cont" v-for="(item, index) in record.contentList" :key="index">{{ item || '-' }}</view>
              <text v-if="!record.contentList || record.contentList.length == 0">-</text>
            </ve-cell>
          </ve-card>
        </template>
        <!-- 加载结束列表为空时展示 -->
        <ve-empty v-if="dataSource.length == 0 && loadStatus == 'nomore'"></ve-empty>
        <!-- 底部加载状态 -->
        <ve-load-more v-else :status="loadStatus" bgColor="#F7F7F9"></ve-load-more>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
  import { ref, onMounted, computed } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import useList from '@/hooks/useList'

  const queryParam = ref({})
  const { resetRefresh, reachBottom, loadData, scrollTop, loadStatus, refreshStatus, dataSource } = useList(
    '/V5/bizOperateLog/getList',
    queryParam,
  )

  onLoad((data) => {
    // 接收参数
    queryParam.value = {
      bizId: data.id,
      bizType: data.type,
    }
    loadData(1)
  })
</script>

<style lang="less" scoped>
  .container {
    height: 100vh;
  }
  .record-list {
    padding: 24rpx;
  }
  .up-cont {
    margin-bottom: 12rpx;
    font-size: 30rpx;
    color: #191c27;
    line-height: 36rpx;
  }
</style>
